.header {
  margin-bottom: 24px;
  position: relative;
  .title {
    font-size: 17px;
    color: #172026;
    margin-bottom: 12px;
  }
  .nav {
    display: flex;
    gap: 24px;
    color: #36434d;
    font-size: 16px;
    .nav-item {
      position: relative;
      cursor: pointer;
      &.active {
        color: #3d88f2;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          bottom: -4px;
          left: 0;
          height: 2px;
          background-color: #3d88f2;
        }
      }
    }
  }
  .mobile-nav {
    display: none;
    position: absolute;
    right: 0;
    top: -245px;
    color: #36434d;
    font-size: 72px;
    background-color: #fff;
    z-index: 9;
    .active-nav {
      display: flex;
      align-items: center;
      gap: 20px;
      .arrow-right {
        width: 61px;
        height: 61px;
      }
      span {
        display: inline-block;
        max-width: 500px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    .select-nav {
      top: 140px;
      right: 0;
      z-index: 9;
      background-color: #fff;
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 40px;
      text-align: center;
      padding: 40px 50px;
      border-radius: 30px;
      border: 1px solid #e6edf2;
      font-size: 62px;
      transition: all 0.3s;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      &.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0px);
      }
      .select-item {
        white-space: nowrap;
        &.active {
          color: #3d88f2;
        }
      }
    }
  }
}

.table {
  .table-header,
  .table-row {
    display: flex;
    text-align: left;
    font-size: 16px;
    border-bottom: 1px solid #e6edf2;
    & > div {
      //   flex: 1;
      padding: 11px 12px;
    }
    svg {
      width: 20px;
      height: 20px;
    }
    .table-row-col-end {
      display: flex;
      align-items: center;
      .btn {
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 4px;
        padding: 0;
        font-size: 16px;
      }
      & > span {
        color: #ccd6de;
        margin: 0 10px;
      }
    }
  }
  .table-header {
    color: #70818c;
  }
  .table-row {
    color: #36434d;
    &:nth-child(2n) {
      background-color: #fcfdfd;
    }
  }
  .col-1 {
    width: 150px;
  }
  .col-2 {
    width: 300px;
  }
  .col-4 {
    width: 200px;
  }
  .col-5 {
    width: 150px;
  }
  .col-6 {
    width: 200px;
  }
  .col-7 {
    min-width: 200px;
  }
  .col-id {
    min-width: 100px;
  }
  .col-task-type {
    min-width: 120px;
  }
  .col-index {
    max-width: 150px;
    min-width: 60px;
  }
}

.progress-status {
  display: flex;
  justify-content: space-between;
  // margin-left: -100px;
  // margin-right: -100px;
  .point-tip-mask + .progress-item {
    justify-content: flex-start;
    &::after {
      left: var(--line-offset-left);
      width: calc(var(--line-width) - var(--line-offset-left));
    }
  }
  .progress-item {
    display: flex;
    justify-content: center;
    position: relative;
    // flex: 1;
    &::after {
      content: "";
      position: absolute;
      width: calc(var(--line-width) - var(--line-offset-left));
      height: 2px;
      left: 50%;
      background-color: #ccd6de;
      bottom: 39px;
    }
    .progress-item-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      &:hover {
        cursor: pointer;
        .progress-title {
          color: #3d88f2;
        }
        .dot {
          background-color: #3d88f2;
          &::before {
            position: absolute;
            background-color: rgba(61, 136, 242, 0.2);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
      }
    }
    &:first-of-type {
      justify-content: flex-start;
      &::after {
        left: var(--line-offset-left);
      }
    }
    &:last-of-type {
      justify-content: flex-end;
      &::after {
        display: none !important;
      }
    }
    &.active-dot {
      .dot {
        background-color: #3d88f2;
        &::before {
          position: absolute;
          background-color: rgba(61, 136, 242, 0.2);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }
      }
      .progress-title {
        color: #3d88f2;
      }
    }
    &.active {
      &::after {
        background-color: #3d88f2;
        z-index: 1;
      }
      .dot {
        background-color: #3d88f2;
        &::before {
          position: absolute;
          background-color: rgba(61, 136, 242, 0.2);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }
      }
      .progress-title {
        color: #3d88f2;
      }
      & + .progress-item {
        .dot {
          background-color: #3d88f2;
          &::before {
            position: absolute;
            background-color: rgba(61, 136, 242, 0.2);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
          }
        }
        .progress-title {
          color: #3d88f2;
        }
      }
    }
    &.show-logo {
      .user-logo {
        display: flex;
      }
    }
    .user-logo {
      display: none;
      flex-direction: column;
      align-items: center;
      .nickname {
        color: #9daab2;
        font-size: 12px;
        margin-bottom: 4px;
      }
      .logo {
        width: 48px;
        height: 48px;
      }
    }
    .dot {
      margin: 14px auto;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #70818c;
      position: relative;
      z-index: 1;
      &::before {
        content: "";
      }
    }
    .progress-title {
      height: 20px;
      line-height: 20px;
      color: #36434d;
      font-size: 14px;
      width: 100px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
  }
}
@media screen and (max-width: 768px) {
  .progress-status {
    overflow-x: scroll;
  }
}

.content-box {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #ccd6de;
  border-radius: 16px;
  position: relative;
  .content-box-item:first-of-type {
    margin-bottom: 24px;
  }
  .divider-line {
    margin: 24px 0;
  }
  .content-box-item-title {
    color: #36434d;
    font-size: 16px;
    margin-bottom: 16px;
  }
  // 成绩展示
  .scores-list {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 24px;
    column-gap: 35px;
    .score-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: #70818c;
      font-size: 14px;
      &.flunk {
        .score {
          background-color: #ff4060;
        }
        color: #ff4060;
      }
      &.none {
        .score {
          background-color: #ccd6de;
        }
      }
      .score {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: #36d96c;
        width: 56px;
        font-size: 18px;
        height: 56px;
        border-radius: 56px;
      }
      .text {
        max-width: 100px;
        word-break: break-all;
        white-space: wrap;
      }
    }
  }
  // 补考
  .make-up-exam {
    .make-up-exam-item-outer {
      display: inline-block;
      &:nth-of-type(2n) {
        background-color: #fcfdfd;
      }
    }
    .make-up-exam-item {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 12px;
      padding-right: 32px;
      border-bottom: 1px solid #e6edf2;

      .name {
        font-size: 14px;
        color: #36434d;
      }
      .status {
        height: 24px;
        padding: 0 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #36d96c;
        background: rgba(54, 217, 108, 0.1);
        font-size: 12px;
        border-radius: 6px;
        &.none {
          background: rgba(255, 64, 96, 0.1);
          color: #ff4060;
        }
        &.flunk {
          background-color: #ccd6de;
          color: #fff;
        }
      }
    }
  }
  // 证书展示
  .certificate-list {
    display: flex;
    gap: 10px;
    .certificate-item {
      border-radius: 8px;
      overflow: hidden;
      height: 120px;
      width: 120px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
.status {
  span {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(54, 217, 108, 0.1);
    color: #36d96c;
    font-size: 12px;
    &.pre-pay {
      color: #ff4060;
      background: rgba(255, 64, 96, 0.1);
    }
    &.complete {
      background: rgba(112, 129, 140, 0.1);
      color: #70818c;
    }
  }
}
// 移动端布局
.mobile-data {
  .mobile-task-list {
    display: flex;
    flex-direction: column;
    gap: 123px;
    .mobile-task-item {
      display: flex;
      flex-direction: column;
      .task-header {
        margin-bottom: 61px;
        flex-direction: column;
        gap: 61px;
        display: flex;
        gap: 41px;
        justify-content: space-between;
        .title {
          font-size: 72px;
          color: #172026;
        }
        .status {
          span {
            display: inline-block;
            padding: 20px 41px;
            border-radius: 31px;
            font-size: 61px;
            white-space: nowrap;
            &.success {
              background: rgba(54, 217, 108, 0.1);
              color: #36d96c;
            }
            &.error {
              color: #ff4060;
              background: rgba(255, 64, 96, 0.1);
            }
          }
        }
      }
      .publish_time {
        font-size: 61px;
      }
      .detail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        & > div {
          display: flex;
          align-items: center;
          font-size: 61px;
          gap: 41px;
          .label {
            color: #70818c;
            white-space: nowrap;
          }
        }
      }
      .divider-line {
        margin: 61px 0;
      }
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .split {
          color: #ccd6de;
        }
        .btn {
          font-size: 72px;
          display: flex;
          align-items: center;
          gap: 10px;
          svg {
            position: relative;
            top: 2px;
            width: 102px;
            height: 102px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .header {
    margin-bottom: 164px;
    .title {
    }
    .nav {
      gap: 148px;
      font-size: 82px;
      .nav-item {
        &.active {
          &::after {
            height: 15px;
            bottom: -15px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .header {
    margin-bottom: 0;
    .mobile-nav {
      display: block;
    }
    .title {
      display: none;
    }
    .pc-nav {
      display: none;
    }
  }
  // progress-bar
  .progress-status {
    .progress-item {
      &::after {
        height: 10px;
        bottom: 205px;
      }
      .user-logo {
        .nickname {
          font-size: 61px;
          margin-bottom: 20px;
        }
        .logo {
          width: 246px;
          height: 246px;
        }
      }
      .dot {
        margin: 72px auto;
        width: 61px;
        height: 61px;
      }
      .progress-title {
        font-size: 72px;
        width: 600px;
        height: auto;
        line-height: normal;
      }
      &.active-dot {
        .dot {
          &::before {
            width: 123px !important;
            height: 123px !important;
          }
        }
      }
    }
  }
  .content-box {
    margin-top: 123px;
    padding: 82px;
    border-radius: 82px;
    .content-box-item:first-of-type {
      margin-bottom: 123px;
    }
    .divider-line {
      margin: 123px 0;
    }
    .content-box-item-title {
      color: #36434d;
      font-size: 82px;
      margin-bottom: 82px;
    }
    .scores-list {
      row-gap: 123px;
      column-gap: 82px;
      .score-item {
        gap: 20px;
        font-size: 72px;
        .score {
          width: 287px;
          height: 287px;
          border-radius: 50%;
          font-size: 92px;
        }
        .text {
          max-width: 400px;
        }
      }
    }
    .make-up-exam {
      .make-up-exam-item {
        gap: 123px;
        padding: 51px;
        padding-right: 164px;
        .name {
          font-size: 72px;
        }
        .status {
          height: 123px;
          padding: 0 41px;
          border-radius: 31px;
          font-size: 61px;
        }
      }
    }
    .certificate-list {
      display: flex;
      .certificate-item {
        height: 614px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .table {
    width: 300%;
    .table-header,
    .table-row {
      font-size: 72px;
      & > div {
        padding: 56px 61px;
        flex: auto !important;
      }
    }
    .col-1 {
      width: 400px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
